<script setup lang="ts">
import { $t } from '@/locales';
import { useNaiveForm } from '@/hooks/common/form';

defineOptions({
  name: 'MenuSearch'
});

interface Emits {
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const { formRef } = useNaiveForm();

const model = defineModel<Api.SearchParams>('model', { required: true });

const initialParams = { ...model.value };

async function reset() {
  Object.assign(model.value, initialParams);
}

async function search() {
  emit('search');
}
</script>

<template>
  <NCard :bordered="false" size="small" class="card-wrapper">
    <NCollapse :default-expanded-names="['form-search']">
      <NCollapseItem :title="$t('common.search')" name="form-search">
        <div class="form-container">
          <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
            <NGrid responsive="screen" item-responsive>
              <NFormItemGi span="24 s:12 m:6" label="站点" path="siteId" class="pr-24px">
                <PorSelect
                  v-model:value="model.siteId"
                  placeholder="请选择站点"
                  url="/cms/site/simpleList?status=1"
                  label-field="name"
                  value-field="id"
                  value-to-number
                  filterable
                  class="user-select"
                  size="small"
                  clearable
                ></PorSelect>
              </NFormItemGi>
              <NFormItemGi span="24 s:12 m:6" label="菜单名称" path="name" class="pr-24px">
                <NInput v-model:value="model.name" placeholder="菜单名称" />
              </NFormItemGi>
            </NGrid>
          </NForm>
          <NSpace class="fixed-buttons" justify="end">
            <NButton @click="reset">
              <template #icon>
                <icon-ic-round-refresh class="text-icon" />
              </template>
              {{ $t('common.reset') }}
            </NButton>
            <NButton type="primary" ghost @click="search">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('common.search') }}
            </NButton>
          </NSpace>
        </div>
      </NCollapseItem>
    </NCollapse>
  </NCard>
</template>

<style scoped>
.form-container {
  position: relative;
}

.fixed-buttons {
  position: absolute;
  right: 24px;
  bottom: 24px;
}
</style>
